See video

Adding new element

using 'append()'

Syntax:

                    $(referentceElement).append('someValue');
                 

eg 1: add some plain text

                    // using id
                    $('#container').append('hai');
                    OR
                    //using class
                    $('.container').append('hai');


                 

eg 2: add some html elements

                 
                    // using id
                    $('#container').append('<p>hai</p>');
                    OR
                    //using class
                    $('.container').append('<p>hai</p>');
                 

in html

                      <table class="table table-bordered">
                          <thead>
                            <tr>
                              <th class="text-center">Row Number</th>
                              <th class="text-center">Remove Row</th>
                            </tr>
                          </thead>
                          <tbody id="tbody">
                    
                          </tbody>
                        </table>
                      </div>
                      <button class="btn btn-md btn-primary" id="addBtn" type="button">
                        Add new Row
                      </button>

                      <button class="btn btn-md btn-primary" id="removeBtn" type="button">
                        Remove row
                      </button>

              

we must have a reference container for appending element. Here id="tbody" is reference container.

in jquery

              $('#addBtn').on('click', function () {  
                // Adding a row inside the tbody.
                $('#tbody').append('<tr><td>text1</td><td>text2</td></tr>');
              });

              

1. when we click on 'id="addBtn"' button, elment is appended to container id="tbody"
2. $('#tbody').append() is using for appending the element.

Removing elements

using remove()

Syntax:

                    $(referentceElement).remove();
                 

eg 1: remove using tag name

                    
                    $('tr').remove();                   
                 

eg 2: remove using reference class

                    
                    $('.removeId').remove();                   
                 

eg 3: remove using this

                    
                    $(this).remove();                   
                 

in html

                  <button class="btn btn-md btn-primary" id="removeBtn" type="button">
                        Remove row
                      </button>
              

in jquery

                  $('#removeBtn').on('click', function () {  
                    // Adding a row inside the tbody.
                    $('tr').remove();
                  });